<template>
    <!-- 总盒子 -->
    <view style="overflow-x: hidden; 
overflow-y: scroll; 
-webkit-overflow-scrolling: touch; 
height: 100vh;" >
      
           <view class="header">
                <nav-bar  :title="'我的消息'" :titleColor="'black'" >    </nav-bar>
            </view>
           <block v-for="(item,index) in messageData">
               <view  >
                   <view style="display: flex;">
                       <view class="avator" style="margin:18rpx 0 0 32rpx;">
                           <image src="/static/images2/message.png" style="height: 100%;width:100%">
           
                           </image>
                       </view>
                       <view style="width: 288rpx;height: 86rpx;">
                           <view class="text1" style="margin:20rpx 0 0 18rpx;">
                               {{item.title}}
                           </view>
                           <view class="text2">
                               {{item.content}}
                           </view>
                       </view>
                       <view class="data1">
                          {{item.createTime.slice(11).slice(0,5)}}
                       </view>
                   </view>
                   <view class="border1"></view>
               </view>
               <view>
                   <view style="display: flex;">
                       <view class="avator">
                           <image src="/static/images2/message.png" style="height: 100%;width:100%">
           
                           </image>
                       </view>
                       <view style="width: 288rpx;height: 86rpx;">
                           <view class="text1">
                               消息通知
                           </view>
                           <view class="text2">
                               暂无任何通知
                           </view>
                       </view>
                       <view class="data1">
                           12:34
                       </view>
                   </view>
                   <view class="border1"></view>
               </view> 
          </block>
          
     




    </view>
</template>

<script>
    import api from "@/api/homePage";
    import loginApi from "@/api/login";
	import mine from "@/api/mine.js"
    import {
        getToken
    } from "@/utils/auth";
    import {
        getQueryString
    } from "@/utils/index";

    export default {
        name: "Index",
        components: {},
        data() {
            return {
                heightConfig: {},
				messageData:[]
            };
        },
        onLoad(query) {
            this.mainHeight = this.$store.getters.heightData.noTabMainHeight;
            this.heightConfig = this.$store.getters.heightData;

        },
        onShow() {

        },
        onReady() {},
        methods: {
            back() {
                uni.navigateBack({
                    delta: 1, //返回层数，2则上上页
                })
            },
        },
	   async mounted(){
		    let data = await mine.getUserMessageList()
			this.messageData = data.rows 
		   console.log(this.messageData)
		}
    };
</script>

<style lang="less" scoped>
    .topbackground {
        width: 100%;
        
        width: 750rpx;
   
        background: #F7F8FA;
		 
        border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .index-page {
        width: 750rpx;
         background-color: red;
        background: #F7F8FA;
		overflow: hidden;
		overflow-y: scroll;
        box-sizing: border-box;
 background: red;
        .header {
            width: 100%;

            .logo {
                width: 200rpx;
                height: 60rpx;
                // background-color: #fee7eb;
                border-radius: 20px;
                text-align: center;
                line-height: 60rpx;
                margin: 0 auto;
            }

            .search {
                width: 670rpx;
                height: 72rpx;
                background: #FFFFFF;
                border-radius: 34rpx 34rpx 34rpx 34rpx;
                // padding: 20rpx 0;
                margin-left: 40rpx;
                margin-top: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .Narbar_bo {
            width: 100%;
            height: 35px;
            display: flex;
            padding: 0 28rpx;
            justify-content: space-between;
            align-items: center;

            .title {
                font-size: 18px;
                font-weight: 600;
            }
        }
    }

    .avator {
        margin: 24rpx 0 0 28rpx;
        width: 90rpx;
        height: 90rpx;
        background: #C1D0FF;
        border-radius: 98rpx 98rpx 98rpx 98rpx;
    }

    .text1 {
        margin: 32rpx 0 0 18rpx;
        width: 288rpx;
        height: 44rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    // text:nth-last-child(1)
    // {
    //   color: red;
    // }


    .text2 {
        white-space: nowrap;
        margin: 8rpx 0 0 18rpx;
        width: 450rpx;
		overflow: hidden;
        height: 34rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #777777;
        text-align: left;
        font-style: normal;
        text-transform: none;
		text-overflow: ellipsis; /* 文本超出显示省略号 */
    }

    .data1 {
        margin: 58rpx 0 0 230rpx;
        width: 100rpx;
        height: 34rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #777777;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .border1 {
        margin-top: 30rpx;
        width: 750rpx;
        height: 0rpx;
        border: 2rpx solid #EEEEEE;
    }
</style>